<template>
  <div>
    <!-- <div v-if="$store.state.status == 0">
      <van-card
        v-for="item in list"
        :key="item.id"
        :num="item.limit"
        :price="item.price"
        :title="item.name"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #footer>
          <van-button size="mini" type="primary" v-if="item.status == 1"
            >去使用</van-button
          >
          <van-button size="mini" v-else>已使用</van-button>
        </template>
      </van-card>
    </div>

    <div v-if="$store.state.status == 1">
      <van-card
        v-for="item in list"
        v-show="item.status == 1"
        :key="item.id"
        :num="item.limit"
        :price="item.price"
        :title="item.name"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #footer>
          <van-button
            size="mini"
            type="primary"
            v-if="item.status == 1"
            @click="item.status = 2"
            >去使用</van-button
          >
          <van-button size="mini" v-else @click="item.status = 1"
            >已使用</van-button
          >
        </template>
      </van-card>
    </div>

    <div v-if="$store.state.status == 2">
      <van-card
        v-for="item in list"
        v-show="item.status == 2"
        :key="item.id"
        :num="item.limit"
        :price="item.price"
        :title="item.name"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #footer>
          <van-button size="mini" type="primary" v-if="item.status == 1"
            >去使用</van-button
          >
          <van-button size="mini" v-else>已使用</van-button>
        </template>
      </van-card>
    </div> -->
    <!-- 上面是写了三个列表 -->

    <van-card
      v-for="item in list"
      :key="item.id"
      v-show="
        $store.state.status == 0 ? true : item.status == $store.state.status
      "
      :num="item.limit"
      :price="item.price"
      :title="item.name"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <!-- $store.state.status == 0 ? true : item.status == $store.state.status 的意思是 如果vuex里的status=0就代表现在是全部被选中 那么就是true -->
      <!-- 如果不是全部就筛选 -->
      <template #footer>
        <van-button
          size="mini"
          type="primary"
          v-if="item.status == 1"
          @click="item.status = 2"
          >去使用</van-button
        >
        <van-button size="mini" @click="item.status = 1" v-else
          >已使用</van-button
        >
      </template>
    </van-card>
    <!-- 用一个列表表示所有的三种情况 -->
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  components: {},
  computed: {
    list() {
      return this.$store.state.list;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped></style>
